<template>
  <view class="page">
    <view class="reference">
      <text style="color: white; margin-left: 20rpx">推荐人:无</text>
    </view>
    <view
      style="
        width: 100%;
        display: flex;
        background: linear-gradient(#fe3b0f, #fc603a);
      "
    >
      <uni-card style="width: 50%; border-radius: 20rpx">
        <view class="container">
          <text style="">团队总人数</text>
          <text class="container-num">104</text>
        </view>
        <view style="display: flex">
          <view class="container">
            <text style="">下级</text>
            <text class="container-num">104</text>
          </view>
          <view class="container" style="margin-left: 80rpx">
            <text style="">下下级</text>
            <text class="container-num">104</text>
          </view>
        </view>
      </uni-card>
      <uni-card style="width: 50%; border-radius: 20rpx">
        <view class="container">
          <text style="">本月推广人数(人)</text>
          <text class="container-num">104</text>
        </view>
        <view style="display: flex">
          <view class="container">
            <text style="">下级</text>
            <text class="container-num">104</text>
          </view>
          <view class="container" style="margin-left: 80rpx">
            <text style="">下下级</text>
            <text class="container-num">104</text>
          </view>
        </view>
      </uni-card>
    </view>

    <view v-for="(item, index) in list" :key="index">
      <uni-card
        :title="item.user.mobile"
        :extra="item.create_time"
        style="height: 220rpx"
      >
        <view style="display: flex; position: relative">
          <view class="left-info">
            <image
              class=""
              style="width: 100rpx; height: 100rpx"
              src="/static/missing-face.png"
            ></image>
          </view>
          <view class="right-info">
            <text style="">{{ item.user.nickname }}</text>
            <text style="">下级成员:{{ item.children_num }}</text>
          </view>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      list: [],
      has_more: [],
    };
  },
  onLoad(options) {
    this.getAgentInfo();
    this.loadData();
  },
  methods: {
    async loadData() {
      const { data } = await this.$http.agent.getMyTeam();
      console.log(`data`, data);
      this.list = data.records;
      this.has_more = data.has_more;
    },
    async getAgentInfo() {
      const { data } = await this.$http.agent.getAgentInfo();
      this.info = data;
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  .container {
    display: flex;
    flex-direction: column;
  }
  .container-num {
    font-weight: 600;
  }
  .reference {
    background-color: #fe3b0f;
    height: 60rpx;
    align-items: center;
    display: flex;
  }
  .right-info {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 20rpx;
    width: auto;
  }
}
</style>
